<template>
    <div class="WorkingSchedule" v-loading="loading">
        <el-form ref="form" :model="form" label-position="top" class="myform">
            <div>
                <el-form-item label="指数类型" class="myform-item">
                    <el-select v-model="form.k_status" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div>
                <el-form-item style="margin-top: 50px">
                    <el-button type="primary" @click="onSearch">查询</el-button>
                    <el-button type="primary" @click="onAdd">新增指数类别</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column label="指数类别" align="center" prop="courier_number"></el-table-column>

            <el-table-column label="操作" align="center" prop="createtime">
                <template>
                    <el-button type="text" @click="onEdit">编辑</el-button>
                    <el-button type="text" style="color:red" @click="onDelete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :form="form"
            :total="total"
            @paginationPostOrderTaskList="postAdminCodeGetWarehouseList"
        />
        <el-dialog title="编辑指数类别" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div>
                <div>
                    指数类别：版型指数 <el-button style="margin-left:20px">添加选项</el-button>
                </div>
                <div class="WorkingSchedule-dialoOne">
                    <div>
                        <div style="width:60px">选项1:</div>
                        
                        <el-input placeholder="请输入">宽松</el-input>
                    </div>
                    <div>
                        <div style="width:60px">选项1:</div>
                        
                        <el-input placeholder="请输入">宽松</el-input>
                    </div>
                    <div>
                        <div style="width:60px">选项1:</div>
                        
                        <el-input placeholder="请输入">宽松</el-input>
                    </div>
                    <div>
                        <div style="width:60px">选项1:</div>
                        
                        <el-input placeholder="请输入">宽松</el-input>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { postAdminCodeGetWarehouseList } from "@/api";
import pagination from "@/components/pagination.vue";
export default {
    components: { pagination },
    data() {
        return {
            loading: false,
            dialogVisible:false,
            options: [
                {
                    label: "未付款",
                    value: 0
                },
                {
                    label: "已付款",
                    value: 1
                },
                {
                    label: "已抵扣",
                    value: 2
                }
            ],
            tableData: [],
            total: 1,
            form: {
                page: 1,
                size: 10,
                courier_number: "",
                createtime: "",
            },
        };
    },
    activated() {
        let form = this.form;
        this.postAdminCodeGetWarehouseList(form);
    },
    methods: {
        // 编辑
        onEdit(){
            this.dialogVisible = true
        },
        // 删除
        onDelete() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 新增指数类别
        onAdd() {
            this.$prompt("", "新增指数类别", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputValidator: (value) => {
                    if (value) return true;
                    return false;
                },
                inputPlaceholder: "请输入指数类别",
                inputErrorMessage: "请输入指数类别",
            })
                .then(({ value }) => {
                    this.$message({
                        type: "success",
                        message: "添加成功",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "取消输入",
                    });
                });
        },
        // 采购列表
        async postAdminCodeGetWarehouseList(data) {
            this.loading = true;
            let form = JSON.parse(JSON.stringify(data));
            if (form.createtime) {
                form.createtime = `${form.createtime[0]}/${form.createtime[1]}`;
            }
            postAdminCodeGetWarehouseList(form)
                .then((res) => {
                    this.loading = false;
                    console.log("采购列表", res);
                    this.tableData = res.data;
                    this.total = Number(res.total);
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        // 搜索
        onSearch() {
            this.form.page = 1;
            this.form.size = 10;
            this.postAdminCodeGetWarehouseList(this.form);
        },
    },
};
</script>

<style lang="scss" scoped>
.myform {
    display: flex;
    justify-content: space-between;
    > div {
        display: flex;
    }
    &-item {
        margin-right: 10px;
    }
}
.WorkingSchedule {
    background: #ffff;
    padding: 20px;
    border-radius: 2px;
    @include boxShadow;
    &-dialoOne{
        display: flex;
        flex-wrap: wrap;
        
        >div{
            margin-top:20px;
            display: flex;
            align-items: center;
            margin-right: 20px;
        }
    }
}
</style>
